<template>
  <t-dialog
    v-model:visible="show"
    :width="900"
    :header="data.name + ' ' + plugin.t('point.title')"
    :footer="false"
    destroyOnClose
    :closeOnOverlayClick="false"
  >
    <template #body>
      <t-table
        row-key="id"
        table-layout="auto"
        :data="list"
        :columns="columns"
        :pagination="page"
        :loading="loading"
        @page-change="({ current }) => onPage(current)"
        hover
      >
        <template #point="{ row }">
          <t-tag :theme="row.point > 0 ? 'primary' : 'success'" variant="light">{{ row.point }}</t-tag>
        </template>
        <template #time="{ row }">
          {{ row.created_at.date() }}
        </template>
      </t-table>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../index'
  import { get } from '@/api/erp/client_point'

  const plugin = index.plugin

  const show = ref(false)
  const list = ref([])
  const data = ref({})
  const columns = [{
    title: plugin.t('point.account_name'),
    colKey: 'account_name',
  }, {
    title: plugin.t('point.point'),
    colKey: 'point',
    cell: 'point',
    align: 'center'
  }, {
    title: plugin.t('point.content'),
    colKey: 'content'
  }, {
    title: plugin.t('point.time'),
    colKey: 'time',
    cell: 'time'
  }]
  const page = ref({
    page: 1,
    current: 1,
    pageSize: 0,
    total: 0,
    showPageSize: false,
  })
  const loading = ref(false)

  const open = row => {
    show.value = true

    // 客户
    data.value = row

    // 加载数据
    onPage(1)
  }

  // 加载
  const getData = () => {
    loading.value = true
    list.value = []
    get(data.value.id, page.value).then(res => {
      list.value = res.data.map((item, index) => {
        item.id = index
        item.created_at = app.time.load(item.created_at)
        return item
      })
      // 分页
      page.value.current = res.current_page
      page.value.pageSize = res.per_page
      page.value.total = res.total
    }).finally(() => {
      loading.value = false
    })
  }

  // 分页
  const onPage = current => {
    page.value.current = current
    page.value.page = current
    getData()
  }
  
  defineExpose({ open })
</script>